<template>
	<div class="overflow-hidden">
		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-button type="primary" @click="handlerSave">
							<icon-ic-round-plus class="mr-4px text-20px"/>
							新增
						</n-button>
					</n-space>
					<n-space align="center" :size="18">
						<n-button size="small" type="primary">
							<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }"/>
							刷新表格
						</n-button>
					</n-space>
				</n-space>
				<el-table
					border
					v-loading="loading"
					:data="tableData"
					center
					empty-text="暂无数据"
					style="width: 100%"
				>
					<el-table-column prop="username" label="用户名称" align="center"/>
					<el-table-column prop="userAlias" label="用户别名" align="center"/>
					<el-table-column prop="deptName" label="用户部门" align="center"/>
					<el-table-column label="用户角色" align="center">
						<template #default="{row}">
							<n-space justify="center">
								<n-tag type="primary" v-for="item in  row.roles">
									{{ item.roleName }}
								</n-tag>
							</n-space>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" align="center"/>
					<el-table-column label="操作" align="center">
						<template #default="scope">
							<n-space justify="center">
								<n-button text @click="handlerEdit(scope.row)">
									<icon-ep-edit-pen/>
									编辑
								</n-button>
								<n-popconfirm
									@positive-click="confirmEvent(scope.row)"
								>
									<template #trigger>
										<n-button type="error" text class="text-15px" :disabled="scope.row.hasAdmin===0">
											<icon-ic-round-delete/>
											删除
										</n-button>
									</template>
									你确定要删除吗?
								</n-popconfirm>
							</n-space>
						</template>

					</el-table-column>
				</el-table>
				<n-space justify="end" class="mt-5px">
					<n-pagination
						v-model:page="page"
						v-model:page-size="size"
						:item-count="itemCount"
						show-size-picker
						:page-sizes="[10, 20, 30, 40]"
						:on-update:page="onChange"
						:on-update:page-size="onUpdatePageSize"
					/>
				</n-space>
			</div>
		</n-card>
		<n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
			<n-form ref="formRef" label-placement="left" require-mark-placement="right-hanging" :label-width="80"
							:model="formModel">
				<n-form-item :span="12" label="用户名称" path="username">
					<n-input v-model:value="formModel.username"/>
				</n-form-item>
				<n-form-item :span="12" label="用户别名" path="userAlias">
					<n-input v-model:value="formModel.userAlias"/>
				</n-form-item>
				<n-form-item :span="12" label="用户密码" path="password">
					<n-input v-model:value="formModel.password"/>
				</n-form-item>
				<n-form-item :span="12" label="用户角色" path="role">
					<n-select v-model:value="formModel.role"
										multiple
										label-field="roleName"
										value-field="roleId"
										:options="roleOptions"/>
				</n-form-item>
				<n-form-item :span="12" label="所属机构" path="deptId">
					<n-tree-select
						:options="deptOptions"
						:value="formModel.deptId"
						label-field="name"
						key-field="id"
						@update:value="handleUpdateValue"
						clearable
					/>
				</n-form-item>
				<n-space class="w-full pt-16px" :size="24" justify="end">
					<n-button class="w-72px" @click="modalVisible=false">取消</n-button>
					<n-button class="w-72px" type="primary" @click="handlerSubmit">确定</n-button>
				</n-space>
			</n-form>
		</n-modal>
	</div>
</template>

<script setup>
import {reactive, toRefs, onMounted} from 'vue'
import {
	selectListUser,
	saveOrUpdateUser,
	deleteUser,
	fetchRoleList,
	getDeptTableTree
} from '@/service'
import {useMessage} from "naive-ui";
const msg = useMessage()
const state = reactive({
	loading: false,
	tableData: [],
	page: 1,
	size: 10,
	itemCount: 0,
	modalVisible: false,
	saveOrUpdateState: 'add',
	title: '新增',
	formModel: {},
	roleOptions: [],
	deptOptions: [],
});
const {
	loading,
	tableData,
	page,
	size,
	itemCount,
	modalVisible,
	title,
	formModel,
	roleOptions,
	deptOptions,
} = toRefs(state);

const handlerSave = () => {
	state.modalVisible = true
	state.title = '新增'
	state.saveOrUpdateState = 'add'
	state.formModel = {}
	handlerSelectRole();
	handlerSelectDeptTree()
}

const handlerEdit = (row) => {
	state.modalVisible = true
	state.title = '编辑'
	state.saveOrUpdateState = 'update'
	handlerSelectRole();
	handlerSelectDeptTree()
	state.formModel = row;
	if (row.roles){
		state.formModel.role=row.roles.map(item=>{
			return item.roleId;
		})
	}
}

const handlerSubmit =async () => {
	console.log(state.formModel)
	const {data} = await saveOrUpdateUser(state.formModel, state.saveOrUpdateState);
	resultTableInit(data)
	state.modalVisible = false;
}
const handleUpdateValue = (value, option) => {
	state.formModel.deptId  = value;
}
const confirmEvent = async (row) => {
	const {data} = await deleteUser([row.userId])
	resultTableInit(data);
}


const handlerSelectDeptTree = async () => {
	const {data} = await getDeptTableTree();
	state.deptOptions=data
	console.log("data",data)
}
const handlerSelectRole = async () => {
	const {data} = await fetchRoleList({});
	state.roleOptions = data.records
}


const onChange = (page) => {
	state.page = page;
	initData();
}

const onUpdatePageSize = (pageSize) => {
	state.size = pageSize;
	initData();
}


onMounted(() => {
	initData()
})
const initData = async () => {
	state.loading = true;
	setTimeout(async () => {

		const {data} = await selectListUser({page: state.page, size: state.size});
		state.tableData = data.records
		state.loading = false
	}, 400)

}

const resultTableInit = (data) => {
	if (!data) {
		msg.error("处理失败")
	} else {
		msg.success("处理成功");
	}
	initData();
}

</script>

<style scoped></style>
